<template>
	<view class="page">
		<!-- 视频播放 -->
		<view class="page-block play-block">
			<video class="play-video" :poster="trailerInfo.poster" :src="trailerInfo.trailer" controls></video>
		</view>
		
		<!-- 影片基本信息 -->
		<view class="page-block movie-info-block">
			<image class="cover" :src="trailerInfo.cover" mode=" "></image>
			<view class="movie-desc">
				<view class="title">{{trailerInfo.name}}</view>
				<view class="basic-info">{{trailerInfo.basicInfo}}</view>
				<view class="basic-info">{{trailerInfo.originalName}}</view>
				<view class="basic-info">{{trailerInfo.totalTime}}</view>
				<view class="basic-info">{{trailerInfo.releaseDate}}</view>
				<view class="score-comp">
					<view class="big-score">
						<view class="score-words">综合评分：</view>
						<view class="movie-score">{{trailerInfo.score}}</view>
					</view>
					<view class="score-stars">
						<trailerStars :innerScore="trailerInfo.score" showNum="0"></trailerStars>
						<view class="praise-counts">
							{{trailerInfo.prisedCounts}} 人点赞
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 剧情介绍 -->
		<view class="plots-block">
			<view class="plots-title">剧情介绍</view>
			<view class="plots-desc">{{trailerInfo.plotDesc}}</view>
		</view>
		<view class="line-wapper">
			<view class="line"></view>
		</view>
		
		<!-- 演职人员 -->
		<view class="actor-block">
			<view class="plots-title">演职人员</view>
			<scroll-view class="scroll-list" scroll-x >
				<view class="actor-wapper" v-for="actor in actorArray">
					<image class="actor-image" :src="actor.pic" mode="aspectFill"></image>
					<view class="actor-name">{{actor.name}}</view>
					<view class="actor-role">{{actor.role}}</view>		
				</view>
				<view class="actor-wapper" v-for="actor in directorArray">
					<image class="actor-image" :src="actor.pic" mode="aspectFill"></image>
					<view class="actor-name">{{actor.name}}</view>
					<view class="actor-role">{{actor.role}}</view>		
				</view>
			</scroll-view>
		</view>
		
		<!-- 剧照 -->
		<view class="photo-block">
			<view class="photo-title">剧照</view>
			<scroll-view class="scroll-list" scroll-x="true" >
				<view class="photo-wapper" v-for="(pic,index) in plotPicsArray">
					<image :data-imgindex="index" @click="lookMe" class="photo-image" :src="pic" mode="aspectFill"></image>
						
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import trailerStars from '../../components/trailerStars.vue'
	
	export default {
		data() {
			return {
				trailerInfo:{
					
				},
				plotPicsArray:[],
				directorArray:[],
				actorArray:[],
				
			}
		},
		onLoad(e){
			// console.log(e.trailerId);	
			
			uni.setNavigationBarColor({
				backgroundColor:"#000000",
				frontColor:"#ffffff"
			})
			var trailerId= e.trailerId;
			
			var me=this;
			
			var serverUrl=this.$serverUrl;
			//查询影片详情
			uni.request({			
				url: serverUrl+'/trailer/1',
				method: 'GET',
				data: {},
				success: res => {
					// debugger
					// console.log(res.data)
					if (res.data.status == 200) {
						
						var trailerInfo = res.data.data;
						me.trailerInfo=trailerInfo;
						// debugger
						var plotPicsArray=JSON.parse(res.data.data.plotPics)
						me.plotPicsArray=plotPicsArray;
					}
			
				},
				fail: () => {},
				complete: () => {
					uni.hideLoading();
					uni.hideNavigationBarLoading()
				}
			});
			
			
			//查询演职人员
			uni.request({			
				// url: serverUrl+'/search/staff/'+trailerId+"/1",
				url: serverUrl+'/search/staff/'+'1001'+"/1",
				method: 'GET',
				data: {},
				success: res => {
					// debugger
					// console.log(res.data)
					if (res.data.status == 200) {
						
						var actorArray = res.data.data;
						me.actorArray=actorArray;					
					}
			
				},
				fail: () => {},
				complete: () => {
					uni.hideLoading();
					uni.hideNavigationBarLoading()
				}
			});
			
			//查询演职人员
			uni.request({			
				// url: serverUrl+'/search/staff/'+trailerId+"/2",
				url: serverUrl+'/search/staff/'+'1001'+"/1",
				method: 'GET',
				data: {},
				success: res => {
					// debugger
					// console.log(res.data)
					if (res.data.status == 200) {
						
						var directorArray = res.data.data;
						me.directorArray=directorArray;					
					}
			
				},
				fail: () => {},
				complete: () => {
					uni.hideLoading();
					uni.hideNavigationBarLoading()
				}
			});
		},
		methods: {
			lookMe(e){
				var me=this;
				var imgIndex=e.currentTarget.dataset.imgindex;
				uni.previewImage({
					current:me.plotPicsArray[imgIndex],
					urls:me.plotPicsArray
				})
			},
			lookStaffs(e){
				var me=this;
				var staffIndex=e.currentTarget.dataset.staffindex;
				
				var directorArray=me.directorArray;
				var actorArray=me.actorArray;
				var newStaffArray=[];
				newStaffArray=newStaffArray.concat(directorArray).concat(actorArray);
				
				var urls=[];
				for(var i=0;i<newStaffArray.length;i++){
					var tempPhoto=newStaffArray[1].photo;
					urls.push(tempPhoto);
				}
				
				uni.previewImage({
					current:urls[staffIndex],
					urls:me.plotPicsArray
				})
			}
		},
		components:{
			trailerStars
		}
	}
</script>

<style lang="scss">
.play-block{
	
}
.play-video{
	width: 100%;
	height: 440rpx;
}

.movie-info-block{
	display: flex;
	flex-direction: row;
	padding: 40rpx 20rpx;
}
.cover{
	width: 280rpx;
	height: 380rpx;
}
.movie-desc{
	margin-left: 20rpx;
	width: 400rpx;
	display: flex;
	flex-direction: column;
}
.title{
	font-size: 26px;
	font-weight: bold;
}
.basic-info{
	color:#3F536E;
	font-size: 13px;
	line-height: 36rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.score-comp{
	background-color: white;
	margin-top: 20rpx;
	width: 360rpx;
	height: 90rpx;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	box-shadow: 3px 2px 10px #dedede;
	padding: 20rpx;
	
	.big-score{
		.score-words{
			font-size: 12px;
			color: gray;
		}
		.movie-score{
			font-size: 26px;
			font-weight: bold;
			margin-left: 8rpx;
			color: #F0AD4E;
			line-height: 60rpx;
		}
	}
	.score-stars{
		margin-left: 20rpx;
		.praise-counts{
			font-size: 14px;
			color: gray;
			line-height: 60rpx;
		}
	}
}
.plots-block{
	// background-color: #C0C0C0;
	padding: 20rpx;
	.plots-title{
		color: #a9a9a9;
		font-size: 14px;
	}
	.plots-desc{
		margin-top: 20rpx;
		color: #555555;
		font-size: 16px;
	}
}


.actor-block{
	padding: 20rpx;
	.plots-title{
		color: #a9a9a9;
		font-size: 14px;
	}
	
	.scroll-list{
		margin-top: 20rpx;
		white-space: nowrap;
		.actor-wapper{
			display: inline-block;
			padding-right: 20rpx;
			text-align: center;
			.actor-image{
				width: 250rpx;
				height: 360rpx;
			}
			.actor-role{
				font-size: 13px;
				color: #dedede;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				
			}
			.actor-name{
				font-size: 15px;
				color: #2C405A;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}

.photo-block{
	padding: 20rpx;
	.photo-title{
		color: #a9a9a9;
		font-size: 14px;
	}
	
	.photo-wapper{
		margin-top: 20rpx;
		display: inline-block;
		padding-right:20rpx;
		.photo-image{
			width: 250rpx;
			height: 360rpx;
		}
	}
}
</style>
